<template>
	<onez-view class="onez-ddz-user" v-if="info" :class="'pos-' + pos" :pos="pos">
		<onez-view class="cards-box" v-if="info.cards">
			<ddz-cards class="cards cards-show" :class="[pos == 'me' ? 'is-me' : 'is-other', 'hide']"
				:small="pos != 'me'" :showCard="info.showCard" v-model="myCards" :cards="info.cards" :ani="true"
				:select="true"></ddz-cards>
		</onez-view>
		<onez-view class="box">
			<slot name="before"></slot>
			<onez-view class="node node-has" v-if="pos != 'me'">
				<onez-view class="has">{{ has }}</onez-view>
			</onez-view>
			<!-- <view v-if="info.role">
				<onez-view class="node node-role">
					<onez-view class="role dizhu" v-if="info.role == 'dizhu'"></onez-view>
					<onez-view class="role farmer" v-else></onez-view>
				</onez-view>
			</view> -->
			<onez-user v-if="info.userid" :userid="info.userid">
				<template v-slot="u">
					<onez-view class="avatar">
						<img :src="info.role == 'dizhu' ? '/static/images/ui/lord_face_to_right.png' : u.info.avatar" />
					</onez-view>
					<onez-view class="nickname">
						<slot name="nickname"></slot>
						<span class="group" v-if="u.info.group">{{ u.info.group }}</span>
						<span class="name">{{ u.info.nickname }}</span>
					</onez-view>
				</template>
			</onez-user>
			<onez-view class="credit">
				<span class="name">{{ info.credit }}</span>
			</onez-view>
			<onez-view class="show">
				<onez-view v-if="type == 'time'" class="time-box flex">
					<slot v-if="pos == 'me'" name="time_left"></slot>
					<onez-view class="flex1">
						<onez-view class="clock">{{ sec }}</onez-view>
					</onez-view>
					<slot v-if="pos == 'me'" name="time_right"></slot>
				</onez-view>
				<ddz-cards v-else-if="type == 'cards'" :small="true" :col="pos == 'me' ? 10 : 6"
					:cards="show.cards"></ddz-cards>
				<onez-view v-else-if="type == 'tip'" class="onez-tip">{{ show.tip }}</onez-view>
				<slot name="after"></slot>
			</onez-view>
		</onez-view>
	</onez-view>
</template>
<script>
	import onezView from '../../components/onez-view/onez-view.vue'
	import ddzCards from './ddz-cards.vue'
	import onezUser from './onez-user.vue'
	export default {
		name: 'ddz-user',
		components: {
			onezView,
			ddzCards,
			onezUser
		},
		props: {
			info: {
				type: Object,
				default: null
			},
			cards: {
				type: Array,
				default: null
			},
			pos: {
				type: String,
				default: 'me'
			},
			showCard: {
				type: Boolean,
				default: true
			},
			has: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				tmpId: 'node-' + (Math.random() + '').split('.')[1],
				myCards: [],
				type: null,
				timer: null,
				show: null
			};
		},
		mounted() {},
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			onTimer() {
				if (this.sec > 0) {
					this.sec--;
					this.$forceUpdate();
				}
			},
			async update(data) {
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.type = null;
				this.show = null;
				await this.$game.wait(this);
				if (data) {
					if (data.type) {
						this.show = data;
						this.type = data.type;
						if (this.type == 'time') {
							this.sec = data.sec;
							this.timer = setInterval(this.onTimer, 1000);
						} else if (this.type == 'cards') {}
					}
				}
			}
		}
	};
</script>
<style scoped>
	.onez-ddz-user {
		position: relative;
		display: block;
		text-align: center;
	}

	.box {
		width: 100%;
		position: relative;
	}

	.avatar {
		width: 80px;
		height: 80px;
		margin: 0 auto;
	}

	.avatar img {
		width: 80px;
		height: 80px;
		border: 0;
	}

	.pos-left .node-has {
		position: absolute;
		right: 0px;
	}

	.pos-left .node-role {
		position: absolute;
		right: -56px;
	}

	.pos-right .node-has {
		position: absolute;
		left: 0px;
	}

	.pos-right .node-role {
		position: absolute;
		left: -56px;
	}

	.nickname {
		display: block;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		color: #fff;
		padding: 8px 16px;
		margin: 0 10px;
		font-size: 1.5em;
		white-space: nowrap;
	}

	.pos-me {
		flex: 1;
		width: 100%;
	}

	.show {
		text-align: center;
		height: 70px;
		display: flex;
		text-align: center;
		align-content: center;
		align-items: center;
		justify-content: center;
	}

	.show .cards {
		transform: scale(0.6);
		left: -12px;
	}

	.pos-me .box {
		width: 100%;
		height: 120px;
		display: flex;
	}

	.pos-me .box .show {
		position: absolute;
		left: 0;
		top: -250px;
		right: 0;
		width: auto;
	}

	.cards-show {
		height: 120px;
	}

	.cards-box {
		position: absolute;
		top: 100px;
		left: 50%;
	}

	.pos-me .cards-box {
		top: -120px;
	}

	.has {
		width: 32px;
		height: 44px;
		background: url(/static/images/ui/hasBg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		color: #fff;
		font-size: 18px;
		text-align: center;
		align-content: center;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.clock {
		position: relative;
		top: 18px;
		width: 50px;
		height: 57px;
		background: url(/static/images/ui/clock.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 5px;
		text-align: center !important;
		line-height: 63px;
		font-size: 20px;
		color: #d2973c;
		text-shadow: #fff4c0 1px 0 0, #fff4c0 0 1px 0, #fff4c0 -1px 0 0, #fff4c0 0 -1px 0;
	}

	.show {
		text-align: center;
	}

	.show * {
		display: inline-block;
	}

	.onez-tip {
		text-align: center;
		font-size: 20px;
		color: #fff4c0;
		text-shadow: #d2973c 1px 0 0, #d2973c 0 1px 0, #d2973c -1px 0 0, #d2973c 0 -1px 0;
	}

	.dizhu {
		width: 60px;
		height: 60px;
		background: url(/static/images/ui/lord_face_to_right.png) no-repeat;
		background-size: 100% 100%;
	}

	.box-right .dizhu {
		background-image: url(/static/images/ui/lord_face_to_left.png);
	}

	.farmer {
		width: 60px;
		height: 60px;
		background: url(/static/images/ui/farmer.png) no-repeat;
		background-size: 100% 100%;
		display: none;
	}
</style>